Vue.component('header-component', {
    template: `
    <header style="background-color: #304156; border-bottom: 1px solid #cccccc; height: 65px;">
        <!-- 外部容器，使用col col-sm-10样式，确保响应式布局 -->
        <div class="container-fluid col col-sm-10" style="padding-left: 0; padding-right: 0; float: right; justify-content: space-between;">
            <el-header>
                <div style="color: white; float: right; align-items: center; display: flex;">
                    <!-- 欢迎信息和用户头像 -->
                    <span style="margin-right: 8px; padding-top: 10px;">欢迎admin</span>
                    <el-avatar style="margin-top: 10px" :size="45" :src="avatarSrc"></el-avatar>
                    <!-- 下拉菜单，使用 placement 属性让菜单浮动到右边 -->
                    <el-dropdown @command="handleCommand" placement="bottom-end">
                        <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right" style="color: white; margin-top: 18px;"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="uCenter">用户中心</el-dropdown-item>
                            <el-dropdown-item command="changPwd">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
        </div>
    </header>
  `,
    data() {
        return {
            avatarSrc: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" // 用户头像的图片 URL
        };
    },
    methods: {
        // 处理下拉菜单的命令
        handleCommand(command) {
            switch (command) {
                case "logout":
                    this.handleLogout();
                    break;
                default:
                    this.handleOtherCommands(command);
                    break;
            }
        },
        // 注销处理
        handleLogout() {
            myaxios.get("/logout")
                .then(() => {
                    window.open("/login", "_self");
                })
                .catch(error => {
                    console.error("Logout failed: ", error);
                    MyMessage.error('注销失败，请重试');
                });
        },
        // 处理其他菜单项的点击事件
        handleOtherCommands(command) {
            MyMessage.info(`点击了命令: ${command}`);
        }
    }
});
